<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form ref="info" :model="data" :rules="rules" :label-width="120">
        <FormItem :label="$t('aBK82EWjerWuhMWgW6CvO')">
          <Input v-model="data.operatorid" disabled/>
        </FormItem>
        <FormItem :label="$t('NNqwsiYKNFh8WR5Mvlwed')" prop="name">
          <Input v-model="data.name" />
        </FormItem>
        <FormItem :label="$t('81K1V1IGGHxPb42EVYt1M')" prop="address">
          <Input v-model="data.address" />
        </FormItem>
        <FormItem :label="$t('jE688EYtIT7-N6CXSWl5L')" prop="tel">
          <Input v-model="data.tel" />
        </FormItem>
        <FormItem :label="$t('--tuVB53obv9ckJ342vmq')" prop="consdate">
          <Input v-model="data.consdate" />
        </FormItem>
        <FormItem :label="$t('Q58DQAm6oYtp3k-cvxlbn')" prop="manager">
          <Input v-model="data.manager" />
        </FormItem>
        <FormItem :label="$t('v1ASKmy-wYfcTblNDaZ_M')" prop="scale">
          <Input v-model="data.scale" />
        </FormItem>
        <FormItem :label="$t('BkvQ7mNQ8XnisEsr98n1I')" prop="profitsharing">
          <Input v-model="data.profitsharing" />
        </FormItem>
        <FormItem :label="$t('M7vkNhYw26IERuJmxNbK-')" prop="country">
          <Select v-model="data.country" filterable>
            <Option v-for="country in countries" :value="country.value" :key="country.value">{{ locale === 'zh-CN' ? country.label : country.ENLabel }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="$t('anGHjW0jLdx5sd7MaWwyJ')" prop="timezone">
          <Input v-model="data.timezone" />
        </FormItem>
        <FormItem :label="$t('0v_5nknbefESzUyjZsmBt')">
          <Input v-model="data.lng" />
        </FormItem>
        <FormItem :label="$t('Uc222rKFcjeWJlngYKYPe')">
          <Input v-model="data.lat" />
        </FormItem>
        <FormItem :label="$t('R50mHX0LambJk39x8cmq6')">
          <Input
            v-model="data.remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { getStationInfo, updateStation } from '@/api/data2'
import { countries as COUNTRIES } from '@/config/countries'

export default {
  name: 'station_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object
  },
  data () {
    return {
      bigImgShow: false,
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      countries: COUNTRIES,
      rules: {
        name: [{ required: true, message: this.$t('JxREaOcDxFufamZYsdylE'), trigger: 'blur' }],
        address: [{ required: true, message: this.$t('qU8dfGT2zgY9cUqV-gsj7'), trigger: 'blur' }],
        tel: [
          { required: true, message: this.$t('Q3g3e0FYXl82rXSrDl9RI'), trigger: 'blur' },
          {
            required: true,
            message: this.$t('90Cc1VMNr19_iHZ-lgqkY'),
            trigger: 'blur',
            validator: (rule, value) => {
              // 限定为数字，加减号，空格，逗号就可以了，不一定就一个号
              const reg = /[0-9,+\-\s]/
              const list = value.split('')
              let flag = true
              _.forEach(list, l => {
                flag = reg.test(l)
                return flag
              })
              return flag
            }
          }
        ],
        manager: [{ required: true, message: this.$t('wdNqZTWKyTovAO8paufzK'), trigger: 'blur' }],
        scale: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        profitsharing: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        timezone: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        country: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
      }
    }
  },
  computed: {
    locale () {
      return this.$store.state.locale
    }
  },
  mounted () {

  },
  methods: {
    transfrom () {
      return _.assign({}, this.data, {
        scale: +this.data.scale,
        profitsharing: +this.data.profitsharing,
        timezone: +this.data.timezone,
        lng: +this.data.lng,
        lat: +this.data.lat
      })
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          // const formData = new FormData()
          // for (const key in this.data) {
          //   formData.append(key, this.data[key])
          // }
          // const res = await setFormData(formData)
          // this.$emit('save', this.transfrom())
          const data = this.transfrom()
          const { code, desc } = await updateStation({ ...data })
          if (code == 200) {
            this.$Message.success(desc || '更新成功')
          } else {
            this.$Message.error(desc)
          }
        } else {
          this.$Message.error(this.$t('fcmS3YBVNyvO3V68Qt3xl'))
        }
      })
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
